import React from 'react'
import { LoginWrapper, LoginBox, Input, Button } from './style'
import {Redirect} from 'react-router-dom'
import { connect } from 'react-redux'
import { actionCreator } from './store'

class Login extends React.PureComponent {
  render () {
    const { loginStatus } = this.props
    console.log('loginStatus', loginStatus)
    if (!loginStatus) {
      return (
        <LoginWrapper>
          <LoginBox>
            <Input placeholder="请输入账号" ref={(input) => {this.account = input}}></Input>
            <Input placeholder="密码" ref={(input) => { this.password = input }}></Input> 
            <Button onClick={() => this.props.login(this.account, this.password)}>提交</Button>
          </LoginBox>
        </LoginWrapper>
      )
    } else {
      return <Redirect to="/" />

    }
  }
}
const mapStateToProps = (state) => ({
  loginStatus: state.getIn(['login', 'login'])
})
const mapDispatch = (dispatch) => ({
  login (accountElement, passwordElement) {
    console.log('accountElement', accountElement)
    console.log('passwordElement', passwordElement)
    dispatch(actionCreator.login({ account: accountElement.value, password: passwordElement.value}))
  }
})

export default connect(mapStateToProps, mapDispatch)(Login)